<template>
  <div class="payment-page">
    <!-- 顶部导航 -->
    <div class="nav-header">
      <button class="back-button" @click="goBack">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path d="m15 18-6-6 6-6" />
        </svg>
      </button>
      <h2>订单支付</h2>
    </div>

    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <div class="loading-text">加载中...</div>
    </div>

    <div v-else-if="!orderInfo" class="error-container">
      <div class="error-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#ff3b30" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="10"></circle>
          <line x1="12" y1="8" x2="12" y2="12"></line>
          <line x1="12" y1="16" x2="12.01" y2="16"></line>
        </svg>
      </div>
      <div class="error-message">订单信息加载失败</div>
      <button class="back-button-large" @click="goToOrderList">返回订单列表</button>
    </div>

    <div v-else class="payment-content">
      <!-- 订单信息 -->
      <div class="order-info-section">
        <div class="order-number">订单号: {{ orderInfo.orderNumber }}</div>
        <div class="order-amount">
          <span class="amount-label">支付金额</span>
          <span class="amount-value">¥{{ orderInfo.totalPrice }}</span>
        </div>
      </div>

      <!-- 商品信息 -->
      <div class="product-section">
        <div class="section-title">商品信息</div>
        <div class="product-card">
          <img :src="orderInfo.items[0].imageUrl" :alt="orderInfo.items[0].name" class="product-image">
          <div class="product-info">
            <div class="product-name">{{ orderInfo.items[0].name }}</div>
            <div class="product-quantity">x{{ orderInfo.items[0].quantity }}</div>
            <div class="product-price">
              <span class="price-label">¥</span>
              <span class="price-value">{{ orderInfo.items[0].price }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 支付方式 -->
      <div class="payment-method-section">
        <div class="section-title">支付方式</div>
        <div class="payment-methods">
          <div
            v-for="method in paymentMethods"
            :key="method.id"
            class="payment-method-item"
            :class="{ active: selectedPayment === method.id }"
            @click="selectedPayment = method.id"
          >
            <div class="payment-icon">
              <img :src="method.icon" :alt="method.name">
            </div>
            <div class="payment-name">{{ method.name }}</div>
            <div class="payment-check" v-if="selectedPayment === method.id">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M20 6L9 17l-5-5"/>
              </svg>
            </div>
          </div>
        </div>
      </div>

      <!-- 支付倒计时 -->
      <div class="payment-timer">
        <div class="timer-label">支付剩余时间</div>
        <div class="timer-value">{{ formatTime(remainingTime) }}</div>
      </div>
    </div>

    <!-- 底部支付按钮 -->
    <div class="payment-footer" v-if="orderInfo">
      <button class="pay-button" @click="handlePayment">
        立即支付 ¥{{ orderInfo.totalPrice }}
      </button>
    </div>

    <!-- 支付成功弹窗 -->
    <div class="payment-success-modal" v-if="showSuccessModal">
      <div class="modal-content">
        <div class="success-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
            <polyline points="22 4 12 14.01 9 11.01"></polyline>
          </svg>
        </div>
        <div class="success-title">支付成功</div>
        <div class="success-message">您的订单已支付成功，感谢您的购买！</div>
        <button class="view-order-button" @click="viewOrder">查看订单</button>
        <button class="continue-shopping-button" @click="continueShopping">继续购物</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { payOrder } from '../api/index'
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
const userId = userStore.userInfo.id
const router = useRouter()
const route = useRoute()
const orderInfo = ref(null)
const selectedPayment = ref('alipay')
const remainingTime = ref(15 * 60) // 15分钟倒计时
const showSuccessModal = ref(false)
const loading = ref(true)
let timer = null

// 支付方式
//icon -- 未替换 4.3
const paymentMethods = [
  {
    id: 'alipay',
    name: '支付宝',
    icon: 'https://felixai.oss-cn-chengdu.aliyuncs.com/8888.png'
  },
  {
    id: 'wechat',
    name: '微信支付',
    icon: 'https://felixai.oss-cn-chengdu.aliyuncs.com/7777.png'
  },
  {
    id: 'card',
    name: '银行卡支付',
    icon: 'https://felixai.oss-cn-chengdu.aliyuncs.com/f377bba3c586378e9b5617a881e2b511.png'
  }
]

// 格式化时间
const formatTime = (seconds) => {
  const minutes = Math.floor(seconds / 60)
  const secs = seconds % 60
  return `${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`
}

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 返回订单列表
const goToOrderList = () => {
  router.push(`/order/myOrders/${userId}`)
}

// 处理支付
const handlePayment = async () => {
  try {
    // 模拟成功响应
    setTimeout(() => {
      showSuccessModal.value = true
    }, 1000)
    // orderInfo.value.orderNumber
    await payOrder(orderInfo.value.orderNumber)

  } catch (error) {
    console.error('支付失败:', error)
    alert('支付失败，请重试')
  }
}

// 查看订单
const viewOrder = () => {
  router.push(`/order/myOrders/${userId}`)
}

// 继续购物
const continueShopping = () => {
  router.push('/petStore')
}

// 启动倒计时
const startTimer = () => {
  timer = setInterval(() => {
    if (remainingTime.value > 0) {
      remainingTime.value--
    } else {
      clearInterval(timer)
      alert('支付超时，请重新下单')
      router.push(`/order/myOrders/${userId}`)
    }
  }, 1000)
}

onMounted(() => {
  // 从路由参数中获取订单信息
  const orderInfoParam = route.query.orderInfo
  if (orderInfoParam) {
    try {
      orderInfo.value = JSON.parse(orderInfoParam)
      loading.value = false

      // 启动倒计时
      startTimer()
    } catch (error) {
      console.error('解析订单信息失败:', error)
      loading.value = false
    }
  } else {
    console.error('未接收到订单信息')
    loading.value = false
  }
})

onBeforeUnmount(() => {
  // 清除定时器
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style lang="scss" scoped>
.payment-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 70px;
}

.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background-color: white;
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

  .back-button {
    background: none;
    border: none;
    padding: 8px;
    margin-left: -8px;
    cursor: pointer;
  }

  h2 {
    flex: 1;
    text-align: center;
    margin: 0;
    font-size: 16px;
  }
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;

  .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 59, 48, 0.2);
    border-top-color: #ff3b30;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 12px;
  }

  .loading-text {
    color: #666;
    font-size: 14px;
  }
}

.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 0 20px;
  text-align: center;

  .error-icon {
    margin-bottom: 16px;
  }

  .error-message {
    color: #666;
    font-size: 16px;
    margin-bottom: 24px;
  }

  .back-button-large {
    background-color: #ff3b30;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 24px;
    font-size: 14px;
    cursor: pointer;

    &:active {
      opacity: 0.9;
    }
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.payment-content {
  padding: 56px 16px 16px;
}

.order-info-section {
  background-color: white;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

  .order-number {
    font-size: 12px;
    color: #666;
    margin-bottom: 12px;
  }

  .order-amount {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .amount-label {
      font-size: 14px;
      color: #333;
    }

    .amount-value {
      font-size: 20px;
      font-weight: bold;
      color: #ff3b30;
    }
  }
}

.product-section, .payment-method-section {
  background-color: white;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

  .section-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 12px;
    position: relative;
    padding-left: 10px;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 14px;
      background-color: #ff3b30;
      border-radius: 3px;
    }
  }
}

.product-card {
  display: flex;
  align-items: center;

  .product-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 12px;
    border: 1px solid #f0f0f0;
  }

  .product-info {
    flex: 1;

    .product-name {
      font-size: 14px;
      margin-bottom: 4px;
      line-height: 1.4;
      max-height: 40px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .product-quantity {
      font-size: 12px;
      color: #999;
      margin-bottom: 4px;
    }

    .product-price {
      color: #ff3b30;

      .price-label {
        font-size: 12px;
      }

      .price-value {
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
}

.payment-methods {
  .payment-method-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;

    &:last-child {
      border-bottom: none;
    }

    &.active {
      .payment-name {
        color: #ff3b30;
      }
    }

    .payment-icon {
      width: 24px;
      height: 24px;
      margin-right: 12px;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    .payment-name {
      flex: 1;
      font-size: 14px;
    }

    .payment-check {
      color: #ff3b30;
    }
  }
}

.payment-timer {
  background-color: white;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;

  .timer-label {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
  }

  .timer-value {
    font-size: 20px;
    font-weight: bold;
    color: #ff3b30;
  }
}

.payment-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);

  .pay-button {
    width: 100%;
    height: 40px;
    background-color: #ff3b30;
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;

    &:active {
      opacity: 0.9;
    }
  }
}

.payment-success-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;

  .modal-content {
    width: 80%;
    max-width: 320px;
    background-color: white;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    .success-icon {
      margin-bottom: 16px;
    }

    .success-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .success-message {
      font-size: 14px;
      color: #666;
      margin-bottom: 20px;
    }

    .view-order-button {
      width: 100%;
      height: 40px;
      background-color: #ff3b30;
      color: white;
      border: none;
      border-radius: 20px;
      font-size: 16px;
      margin-bottom: 12px;
      cursor: pointer;

      &:active {
        opacity: 0.9;
      }
    }

    .continue-shopping-button {
      width: 100%;
      height: 40px;
      background-color: white;
      color: #666;
      border: 1px solid #ddd;
      border-radius: 20px;
      font-size: 16px;
      cursor: pointer;

      &:active {
        background-color: #f5f5f5;
      }
    }
  }
}
</style>
